<template>
  <div class="make-course-chapter-build_question">
    <div class="build-container">
      <div class="build-left">
        <div class="chapter-title">
          <div class="text">{{ chapterName }}</div>
          <div class="confirm-btn" @click="save()">确定</div>
        </div>
        <!-- 题库列表 -->
        <div class="question-list">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            row-key="id"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column
              property="content"
              label="试题题目"
              width="400"
              show-overflow-tooltip
            />
            <el-table-column
              property="questionTypeMessage"
              label="题目类型"
              width="100"
            />
            <el-table-column
              property="kbName"
              label="知识点"
              width="150"
              show-overflow-tooltip
            />
            <el-table-column align="center" label="操作">
              <template #default="scope">
                <el-checkbox
                  v-model="scope.row.checked"
                  :label="scope.row.checked ? '已选中' : '未选中'"
                  @change="handleItemChecked(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="build-right">
        <!-- <mdEditor
          ref="mdEditor"
          v-model="mdContent"
          :toolbars="[]"
          :footers="[]"
        /> -->
        <div class="dialog-content markdown-body" v-if="rowData.content">
          <div class="question-title" v-html="rowData.content"></div>
          <template v-if="rowData.questionType === 1">
            <div
              v-for="(item, index) in rowData.answer"
              :key="index"
              class="question-chose"
            >
              <span>{{ answerChose[index] }}：</span>
              <span class="question-flex" v-html="item.content"></span>
            </div>
          </template>
          <div class="question-answer">
            答案：
            <span
              v-if="rowData.questionType === 3"
              class="chose"
              style="font-family: '黑体'; font-size: 16px"
              v-html="answerTrue"
            ></span>
            <span v-else class="chose" v-html="answerTrue"></span>
          </div>
        </div>
        <div class="no-data" v-else>
          <img src="@/assets/img/no-data.png" alt="" />
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "make_courseChapterBuild",
  data() {
    return {
      courseId: "",
      chapterId: "",
      chapterName: "",
      showEdit: false,
      showDel: false,
      mdContent: "课程题库课程题库课程题库课程题库",
      tableData: [],
      rowData: {},
      answerTrue: "",
      answerChose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      selectedQuestionIds: [],
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.chapterId = this.$route.query.id;
    this.chapterName = this.$route.query.name;
    // 处理selectedIds可能为空的情况
    this.selectedQuestionIds = this.$route.query.selectedIds
      ? this.$route.query.selectedIds.split(",")
      : [];
    this.getQuestion();
  },
  methods: {
    // 获取题目
    getQuestion() {
      this.$axios
        .get(
          `/tes/course/${this.courseId}/businessType/1/question-repository/questionOwner-chapter?chapterId=${this.chapterId}`
        )
        .then((res) => {
          this.tableData = res.data.map((item) => ({
            ...item,
            content: this.delHTMLLabel(item.content).replace(/\(\+\)/g, "（）"),
            // 根据selectedQuestionIds设置checked状态
            checked: this.selectedQuestionIds.includes(item.id.toString()),
          }));
        });
    },

    // 删除html标签
    delHTMLLabel(str) {
      let reg = /<[^>]*>|<\/[^>]*>/gm;
      let result = str.replace(reg, "");
      return result;
    },

    // 选中题目回显
    handleItemChecked(row) {
      this.rowData = row;
      let answer = row.answer;
      this.answerTrue = "";
      //选择题
      if (row.questionType === 1) {
        //遍历找出正确答案选项
        answer.forEach((item, index) => {
          if (item.isCorrect) {
            this.answerTrue += this.answerChose[index];
          }
        });
      }
      //判断题
      if (row.questionType === 2) {
        if (answer[0].isCorrect) {
          this.answerTrue = "正确";
        } else {
          this.answerTrue = "错误";
        }
      }
      //填空题,简答，实验
      if (
        row.questionType === 3 ||
        row.questionType === 4 ||
        row.questionType === 9
      ) {
        this.answerTrue = answer[0].content;
      }
    },

    // 保存
    save() {
      const selectIds = this.tableData
        .filter((item) => item.checked)
        .map((item) => item.id);
      if (selectIds.length === 0) {
        this.$message.warning("请先选择题目");
        return;
      }
      this.$axios
        .post(`/tes/course/auto/make/chapter-resource`, {
          courseId: this.courseId,
          chapterId: Number(this.chapterId),
          type: 2,
          contextIds: selectIds,
        })
        .then((res) => {
          this.$message.success("保存成功");
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeCourseChapterBuild",
            query: { id: this.chapterId, name: this.chapterName },
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.make-course-chapter-build_question {
  background-color: #fff;
  box-sizing: border-box;
  overflow-x: hidden;
  .build-container {
    display: flex;
    justify-content: center;
    width: 100%;
    .build-left {
      width: 60%;
      max-height: 650px;
      overflow-y: auto;
      background: #fbfcff;
      padding: 30px 40px;
      overflow-y: auto;
      box-sizing: border-box;
      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: calc(4px / 2);
      }

      &::-webkit-scrollbar-thumb {
        background: #fbfcff;
        border-radius: calc(4px / 2);
      }

      .chapter-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .confirm-btn {
          cursor: pointer;
          color: #fff;
          background-color: #457aff;
          width: 58px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border-radius: 4px;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          box-sizing: border-box;
        }
        .text {
          font-size: 18px;
          color: #1e2c48;
        }
      }

      .question-list {
        .el-popper.is-dark {
          max-width: 30%;
          line-height: 22px;
        }
      }

      .section-container {
        border-radius: 6px;
        margin-bottom: 20px;

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 15px 0;

          .section-title {
            font-size: 14px;
            font-weight: 500;
            color: #596184;
          }

          .section-actions {
            display: flex;
            align-items: center;

            i {
              cursor: pointer;
              color: #1890ff;
              font-size: 16px;

              &:hover {
                color: #40a9ff;
              }
            }
          }
        }
      }
    }
    .build-right {
      width: 40%;
      height: 650px;

      background-color: #f3f5fa;
      .dialog-content {
        padding: 20px 64px 0;
        .question-title {
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 20px;
          p {
            line-height: 30px;
          }
        }
        .question-chose {
          font-size: 14px;
          line-height: 24px;
          padding: 6px 0;
          display: flex;
          align-items: center;
          .question-flex {
            flex: 1;
          }
          p {
            line-height: 24px;
          }
        }
        .question-answer {
          font-size: 16px;
          .chose {
            font-size: 18px;
            line-height: 30px;
            color: #385899;
            vertical-align: -2px;
            p {
              line-height: 30px;
            }
          }
          margin-top: 20px;
        }
      }
      .no-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        height: 100%;
        background-color: #fff;
        span {
          font-size: 14px;
          color: #999;
        }
      }
      // .md-editor {
      //   width: 100%;
      //   min-height: 650px !important;
      //   height: 650px !important;
      //   :deep(.md-editor-input-wrapper) {
      //     display: none;
      //   }
      //   :deep(.md-editor-resize-operate) {
      //     display: none;
      //   }
      // }
    }
  }
}
</style>